import { RichEditorProps } from "../toolbar"
import { ToggleGroupButton, ToggleGroupContainer } from "../components/ToggleButton"
import onClickify from "../libs/onClickify"
import { useCurrentBlockMetaData } from "../hooks/useCurrentBlockMetaData"
import { setBlockData } from "../libs/draftjs-utils"
import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon } from '@radix-ui/react-icons';

const aligns = [{
    icon: <TextAlignLeftIcon />,
    value: "left"
}, {
    icon: <TextAlignCenterIcon />,
    value: "center"
}, {
    icon: <TextAlignRightIcon />,
    value: "right"
}]

const ALIGN = ({
    editorState,
    onChange
}: RichEditorProps) => {
    const meta = useCurrentBlockMetaData(editorState);
    const alignMeta = meta.get("align");
    return (
        <ToggleGroupContainer>
            {aligns.map(({ value, icon }) => (
                <ToggleGroupButton
                    value={value}
                    key={value}
                    checked={alignMeta === value}
                    onMouseDown={onClickify(() => {
                        const data = { align: "" }
                        if (alignMeta !== value) {
                            data.align = value;
                        }
                        onChange(setBlockData(editorState, data));
                    })}
                >
                    {icon}
                </ToggleGroupButton>
            ))}
        </ToggleGroupContainer>
    )
}
export default ALIGN
